<script setup lang="ts">
interface CaseItemCardProps {
  picture?: string
  title?: string
  subtitle?: string
}

const props = defineProps<CaseItemCardProps>()
</script>

<template>
  <view class="flex flex-col items-center mb-30rpx bg-white rounded-20rpx overflow-hidden">
    <uv-image class="w-690rpx h-310rpx bg-#aaaaaa" :src="props.picture" mode="aspectFill" width="690rpx" height="310rpx" :observe-lazy-load="true">
      <template #loading>
        <uv-loading-icon color="gray" />
      </template>
      <template #error>
        <view style="font-size: 24rpx">
          加载失败
        </view>
      </template>
    </uv-image>
    <view class="flex flex-col p-30rpx w-full">
      <view class="text-30rpx leading-30rpx text-primary font-bold">
        {{ props.title }}
      </view>
      <Spacer height="20" />
      <view class="text-26rpx leading-26rpx text-tertiary">
        {{ props.subtitle }}
      </view>
    </view>
  </view>
</template>
